<template>
	<div class="content-wrapper">
<!-- 		    <h3 style="width:150px;text-align:center;margin:10px 0;">输入优惠券描述</h3> -->
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="200">
                    <FormItem>
                        <h3 class="coupon-title">输入优惠券描述</h3>
                    </FormItem>

					<FormItem label="主标题：" prop="name">
						<Row>
							 <Col span="4"><Input size="large" v-model="formValidate.name" placeholder="请输入主标题"></Input></Col>
						</Row>
					</FormItem>

					<FormItem label="副标题：" prop="mail">
						<Row>
							 <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入副标题"></Input></Col>
						</Row>						
					</FormItem>

                    <FormItem label="标签：" prop="mail">
                        <Row>
                             <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入副标题"></Input></Col>
                        </Row>                      
                    </FormItem>

					<FormItem label="移动端推广链接：" prop="desc">
                        <Row>
                             <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入副标题"></Input></Col>
                        </Row>        
					</FormItem>

					<FormItem label="PC端推广链接：" prop="mail">
                        <Row>
                             <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入副标题"></Input></Col>
                        </Row>   											    
					</FormItem>

                    <FormItem>
                        <h3 style="margin-left:-90px;">优惠配置选项</h3>
                    </FormItem>
 
					<FormItem label="类型：" prop="mail">
						<Row>
							 <Col span="8">
                                <RadioGroup v-model="button4" type="button" size="large">
                                        <Radio label="折扣"></Radio>
                                        <Radio label="免息券"></Radio>
                                        <Radio label="还款券"></Radio>
                                </RadioGroup>
							 </Col>
						</Row>							
					</FormItem>

					<FormItem label="对象：" prop="mail">
                        <Row>
                             <Col span="8">
                                <RadioGroup v-model="button4" type="button" size="large">
                                        <Radio label="本金"></Radio>
                                        <Radio label="服务费"></Radio>
                                        <Radio label="手续费"></Radio>
                                </RadioGroup>
                             </Col>
                        </Row>  
					</FormItem>

					<FormItem label="面额：" prop="mail">
						<Row>
							 <Col span="4"><Input size="large" v-model="formValidate.mail" placeholder="请输入邮箱"></Input></Col>
						</Row>
					</FormItem>	

                    <FormItem>
                        <h3 style="margin-left:-150px;">优惠券使用条件和规则</h3>
                    </FormItem>

                    <FormItem label="请选择要添加的条件和规则：" prop="mail">
                        <Row>
                             <Col span="15">
                                <RadioGroup v-model="button4" type="button" size="large">
                                    <Radio label="业务"></Radio>
                                    <Radio label="使用期数"></Radio>
                                    <Radio label="用户属性"></Radio>
                                    <Radio label="使用渠道"></Radio>
                                    <Radio label="兑换规则"></Radio>
                                    <Radio label="使用规则"></Radio>
                                    <Radio label="支付渠道"></Radio>
                                </RadioGroup>
                             </Col>
                        </Row>  
                    </FormItem> 

                    <FormItem prop="mail">
                        <Row>
                             <Col span="12">
                                <Table :columns="columns1" :data="data1"></Table>
                             </Col>
                            <Col span="12">

                             </Col>
                        </Row>  
                    </FormItem>                     				

					<FormItem>
					    <Button type="primary" @click="handleSubmit('formValidate')">创建活动立项</Button>
					    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
					</FormItem>
			</Form>
            <Business-modal :modal="businessModal"></Business-modal>
            <Instalment-modal :modal="instalmentModal"></Instalment-modal>
	</div>
</template>

<style scoped>
   .content-wrapper{
      padding:25px;
   }

   .coupon-title{
      margin-left:-100px;
   }

   .ivu-radio-group-button .ivu-radio-wrapper{
        border-radius: 4px;
        margin-right:15px;
        border-left: 0;
        border: 1px solid #dddee1;
   }

    .ivu-radio-group-button .ivu-radio-wrapper-checked{
        box-shadow: 0 0 0 0;
        border-color: #2d8cf0; 
    }
</style>

<script>
    import BusinessModal from './component/BusinessModal';
    import InstalmentModal from './component/InstalmentModal';
    export default {
        data () {
            return {
                businessModal:false,
                instalmentModal:true,
            	data4: [
                    {
                        value: 'beijing',
                        label: '北京',
                        children: [],
                        loading: false
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州',
                        children: [],
                        loading:false
                    }
                ],
                button4:'',
				cityList: [
					{
					    value: 'beijing',
					    label: '北京市'
					},
					{
					    value: 'shanghai',
					    label: '上海市'
					},
					{
					    value: 'shenzhen',
					    label: '深圳市'
					},
					{
					    value: 'hangzhou',
					    label: '杭州市'
					},
					{
					    value: 'nanjing',
					    label: '南京市'
					},
					{
					    value: 'chongqing',
					    label: '重庆市'
					}
				],
				model1: '',                
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
                        { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请输入个人介绍', trigger: 'blur' },
                        { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
                    ]
                },
                columns1: [
                    {
                        title: '规则大类',
                        key: 'name'
                    },
                    {
                        title: '规则明细',
                        key: 'age'
                    },
                    {
                        title: '用户端展示描述',
                        key: 'address'
                    }, {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                        disabled:true
                                    }
                                }, '查看'),

                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                data1: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    }
                ]
            }
        },
        methods: {
            handleSubmit (name) {
            	this.$router.push({path:'/activitysearch'});
                // this.$refs[name].validate((valid) => {
                //     if (valid) {
                //         this.$Message.success('提交成功!');
                //     } else {
                //         this.$Message.error('表单验证失败!');
                //     }
                // })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            loadData (item, callback) {
                item.loading = true;
                setTimeout(() => {
                    if (item.value === 'beijing') {
                        item.children = [
                            {
                                value: 'talkingdata',
                                label: 'TalkingData'
                            },
                            {
                                value: 'baidu',
                                label: '百度'
                            },
                            {
                                value: 'sina',
                                label: '新浪'
                            }
                        ];
                    } else if (item.value === 'hangzhou') {
                        item.children = [
                            {
                                value: 'ali',
                                label: '阿里巴巴'
                            },
                            {
                                value: '163',
                                label: '网易'
                            }
                        ];
                    }
                    item.loading = false;
                    callback();
                }, 1000);
            }           
        },
        components:{
           BusinessModal,
           InstalmentModal
        }
    }
</script>

